<template>
	<view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20">
			<u-row>
				<u-col span="11" text-align="center">
						<u-search placeholder="输入商品编号搜索" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
				</u-col>
				<u-col span="1" text-align="center" @click="scang()">
					<view class="u-m-t-14 weikaishi2">
						<u-icon name="scan" color="#2b85e4" size="43"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-card padding="16" v-for="(item,index) in dataList" :key="index">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2 weikaishi3">
								<span>所属客户：{{item.customerName}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="12" text-align="left">
							<view class="u-m-t-2 weikaishi huanghang">
								<span>序号：{{item.orderNumber}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-2 weikaishi">
								<span>商品编号：{{item.goodsNumber}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body">
				<view class="wrap">
					<u-row>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-4 jinxingzhong">
								<span>重量：</span><span>{{item.weight}}KG</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-4 jinxingzhong">
								<span>条码：</span><span>{{item.v1}}</span>
							</view>
						</u-col>
						<u-col span="12" text-align="left">
							<view class="u-line-1 u-m-t-4 huanghang">
								<span>备注：</span><span>{{item.remarks}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="foot-butten" slot="foot">
				<view :class="flex">
					<u-col span="12" text-align="center" @click="editnumber(item)">
						<view  class="u-m-10">
							绑定条码
						</view>
					</u-col>
				</view>
			</view>
		</u-card>
		<u-popup v-model="popupShow" mode="center" closeable width="500rpx" height="300rpx" border-radius="10">
			<view class="u-text-center u-m-t-20">绑定条码</view>
			<view class=" u-m-20">
				<u-input v-model="updateitem.v1" border="true" placeholder="输入条码" focus="true"/>
			</view>
			<view  style="height: 80rpx">
				<view class="close-btn u-m-t-40">
					<u-button type="primary" size="medium" @click="candefine()">扫码</u-button>
					<u-button size="medium" @click="define3()">确定</u-button>
				</view>
			</view>
		</u-popup>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				flex:'',
			    pageNo: 1,
			    hasMore: true,
			    orderCount: 0,
				dataList: [],
				keyword:'',
				updateitem:{
					id:'',
					v1:''
				},
				popupShow:false,
			}
		},
		onLoad(open) {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中'
			})
			if (this.hasMore) {
				this.pageNo++ 
				setTimeout(() => {
					this.loadOrder({
						condition: this.keyword
					}).then(res => {})
					uni.hideLoading()
				}, 500)
			} else {
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '已经到低了哦',
						duration: 2000
					});
				}, 500)
			}
		},
		methods: {
			define3() {
				if(this.updateitem.v1 == null || this.updateitem.v1 == ''){
					uni.showToast({
						title: "请输入条码编号",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在提交'
				})
				this.$http.post('/rest/tool/editItem',{
				},{
					params: this.updateitem,
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					if(res.data.code == 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
						this.popupShow = false
						this.refresh()
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})
					}
				})
			},
			editnumber(item){
				this.updateitem.id = item.id
				this.updateitem.v1 = item.v1
				this.popupShow = true
			},
			refresh(){
				this.pageNo = 1
				this.hasMore = true
				this.loadOrder({
					condition: this.keyword
				}).then(res => {
				})
			},
			loadOrder(param = {}) {
				return new Promise((resolve, reject) => {
					param = Object.assign(param, {
						page: this.pageNo,
						limit: 10
					})
					this.$http.post('/rest/tool/list',{
					},{
						params: param,
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						if (this.pageNo == 1) {
							this.dataList = res.data.data
						} else {
							this.dataList = this.dataList.concat(res.data.data)
						}
						this.orderCount = res.data.count
						this.hasMore = this.pageNo * 10 < res.data.count
						resolve(res)
					})
				})
			},
			candefine(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.updateitem.v1 = res.result
					}
				});
			},
			scang(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.keyword = res.result
						that.search()
					}
				});
			},
			search(e){
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
		}
	}
</script>
<style lang="scss">
	page{
			background-color: #ffffff;
	}
	
	.wrap {
		padding: 15rpx;
	}
	.weikaishi2{
		font-size: 36rpx;
	}
	.weikaishi3{
		font-size: 32rpx;
	}
	.huanhang{
		word-break:break-all;
	}
</style>
